<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./public/swiper-bundle.min.css">
  <title>堆叠式轮播示例</title>
</head>

<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="../img/pcindex/touxiang.png" alt="图片1">
      </div>
      <div class="swiper-slide">
        <img src="../img/pcindex/touxiang.png" alt="图片1">
      </div>
      <div class="swiper-slide">
        <img src="../img/pcindex/touxiang.png" alt="图片2">
      </div>
      <div class="swiper-slide">
        <img src="../img/pcindex/touxiang.png" alt="图片3">
      </div>
      <div class="swiper-slide">
        <img src="../img/pcindex/touxiang.png" alt="图片1">
      </div>
      <div class="swiper-slide">
        <img src="../img/pcindex/touxiang.png" alt="图片2">
      </div>
      <div class="swiper-slide">
        <img src="../img/pcindex/touxiang.png" alt="图片3">
      </div>
      <div class="swiper-slide">
        <img src="../img/pcindex/touxiang.png" alt="图片3">
      </div>
      <!-- 可以添加更多的轮播项 -->
    </div>
    <!-- <div class="swiper-pagination"></div> -->

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <script src="./public/swiper-bundle.min.js"></script>
</body>

<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }

  .swiper-container {
    overflow: hidden;
    width: 42%;
    /* height: 400px; */
    margin: 50px auto;
  }

  .swiper-slide {
    /* background-color: #f0f0f0; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid #ddd; */
    /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); */
  }

  .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
  }


  @media screen and (max-width:769px) {
  .swiper-container {
    width: 100%;
  }

</style>


<script>
  // 初始化 Swiper 实例
  var mySwiper = new Swiper('.swiper-container', {
    // slidesPerView: 'auto',
    centeredSlides: true,
    spaceBetween: -200,
    loop: true,
    // autoplay:true,
    slidesPerView: 4,
    effect: 'coverflow',
    coverflowEffect: {
      rotate: 0,
      stretch: 0,
      depth: 130,
      modifier: 4,
      slideShadows: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  
</script>

</html>
